<template>
    <div class="app-container">
        <el-row id="detail" ref="detail" justify="space-between">
            <el-col class="detail-container el-form-register" :span="20" :lg="20" :xl="21">
                <!-- 成孔信息 -->
                <el-form ref="detailForm" :inline="true" label-width="230px" :model="params1"
                    :rules="rules">
                    <div class="el-form-ls">
                        <Title ref="baseInfo" id="baseInfo" name="成孔信息" level="1" @toggleShow="toggleShow('baseInfo')">
                        </Title>
                        <div class="baseinfo" v-show="showBaseInfo">
                            <el-form-item class="el-form-whole" label="钻孔依托的项目" prop="projectName">
                                <el-input v-model="params1.projectName" placeholder="请输入" :readonly="!isEdit" />
                            </el-form-item>
                            <el-form-item class="el-form-whole" label="钻孔编号" prop="boreholeNumber">
                                <el-input v-model="params1.boreholeNumber" placeholder="请输入" :readonly="!isEdit" />
                            </el-form-item>
                            <el-form-item class="el-form-whole" label="钻孔位置（°）">
                                <el-form-item class="el-form-sub" label-width="90" label="经度" prop="hlLongitude"
                                    style="width: 700px">
                                    <el-input v-model="params1.hlLongitude" placeholder="请输入" :readonly="!isEdit" />
                                </el-form-item>
                                <br />
                                <el-form-item class="el-form-sub" label-width="90" label="纬度" prop="hlLatitude"
                                    style="width: 700px">
                                    <el-input v-model="params1.hlLatitude" placeholder="请输入" :readonly="!isEdit" />
                                </el-form-item>
                                <!--zyt修改start-->
                                <div
                                    style="position: absolute;width: 100%;height: 1px;top: 39px;left: 0px;background: lightgrey;">
                                </div>
                            </el-form-item>
                            <el-form-item class="el-form-whole" label="钻孔深度（m）" prop="drillingDepth">
                                <el-input v-model="params1.drillingDepth" placeholder="请输入" :readonly="!isEdit" />
                            </el-form-item>
                            <el-form-item class="el-form-whole" label="地面高程（m）" prop="groundElevation">
                                <el-input v-model="params1.groundElevation" placeholder="请输入" :readonly="!isEdit" />
                            </el-form-item>
                            <el-form-item class="el-form-whole" label="地下水位（m）" prop="groundwaterLevel">
                                <el-input v-model="params1.groundwaterLevel" placeholder="请输入" :readonly="!isEdit" />
                            </el-form-item>
                        </div>
                    </div>
                </el-form>

                <!-- 土动力参数 -->
                <div class="el-form-ls">
                    <Title ref="keyMap" id="keyMap" name="土动力参数" level="1" @toggleShow="toggleShow('keyMap')"></Title>
                    <!-- 表格显示 -->
                    <el-table v-show="showKeyMap" class="listTable" ref="tableRef1" border :data="params2"
                        :default-expand-all="true"
                        style="width: 100%" :cell-style="{ border: '1px solid #e5ebf7' }"
                        :header-cell-style="{ border: '1px solid #e5ebf7', borderLeft: 'none' }">
                        <el-table-column type="index" width="55" label="序号" />
                        <!-- <el-table-column header-align="center" align="center" label="序号" prop="serialNumber" /> -->
                        <el-table-column header-align="center" align="center" label="土类号" prop="stNumber" />
                        <el-table-column header-align="center" align="center" label="岩性名称" prop="geotechnicalName" />
                        <el-table-column header-align="center" align="center" label="钻孔编号" prop="boreholeNumber" />
                        <el-table-column header-align="center" align="center" label="土样埋深(米)" prop="bdosSample" />
                        <el-table-column header-align="center" align="center" label="参数来源" prop="parameterSource" />
                        <el-table-column header-align="center" align="center" label="密度(kg/m3)" prop="sdDensity" />
                        <el-table-column header-align="center" align="center" width="100" prop="modulusRatio1">
                            <template #header>
                                模量比
                                <br>
                                (G/Gmax)
                                <br>
                                剪应变(γ)
                                <br>
                                (10-4×0.05)
                            </template>
                        </el-table-column>
                        <el-table-column header-align="center" align="center" width="100" prop="modulusRatio2">
                            <template #header>
                                模量比
                                <br>
                                (G/Gmax)
                                <br>
                                剪应变(γ)
                                <br>
                                (10-4×0.10)
                            </template>
                        </el-table-column>
                        <el-table-column header-align="center" align="center" width="100" prop="modulusRatio3">
                            <template #header>
                                模量比
                                <br>
                                (G/Gmax)
                                <br>
                                剪应变(γ)
                                <br>
                                (10-4×0.50)
                            </template>
                        </el-table-column>
                        <el-table-column header-align="center" align="center" width="100" prop="modulusRatio4">
                            <template #header>
                                模量比
                                <br>
                                (G/Gmax)
                                <br>
                                剪应变(γ)
                                <br>
                                (10-4×1.00)
                            </template>
                        </el-table-column>
                        <el-table-column header-align="center" align="center" width="100" prop="modulusRatio5">
                            <template #header>
                                模量比
                                <br>
                                (G/Gmax)
                                <br>
                                剪应变(γ)
                                <br>
                                (10-4×5.00)
                            </template>
                        </el-table-column>
                        <el-table-column header-align="center" align="center" width="108" prop="modulusRatio6">
                            <template #header>
                                模量比
                                <br>
                                (G/Gmax)
                                <br>
                                剪应变(γ)
                                <br>
                                (10-4×10.00)
                            </template>
                        </el-table-column>
                        <el-table-column header-align="center" align="center" width="108" prop="modulusRatio7">
                            <template #header>
                                模量比
                                <br>
                                (G/Gmax)
                                <br>
                                剪应变(γ)
                                <br>
                                (10-4×50.00)
                            </template>
                        </el-table-column>
                        <el-table-column header-align="center" align="center" width="120" prop="modulusRatio8">
                            <template #header>
                                模量比
                                <br>
                                (G/Gmax)
                                <br>
                                剪应变(γ)
                                <br>
                                (10-4×100.00)
                            </template>
                        </el-table-column>
                        <el-table-column header-align="center" align="center" width="100" prop="dampingRatio1">
                            <template #header>
                                阻尼比(λ)
                                <br>
                                剪应变(γ)
                                <br>
                                (10-4×0.05)
                            </template>
                        </el-table-column>
                        <el-table-column header-align="center" align="center" width="100" prop="dampingRatio2">
                            <template #header>
                                阻尼比(λ)
                                <br>
                                剪应变(γ)
                                <br>
                                (10-4×0.10)
                            </template>
                        </el-table-column>
                        <el-table-column header-align="center" align="center" width="100" prop="dampingRatio3">
                            <template #header>
                                l阻尼比(λ)
                                <br>
                                剪应变(γ)
                                <br>
                                (10-4×0.50)
                            </template>
                        </el-table-column>
                        <el-table-column header-align="center" align="center" width="100" prop="dampingRatio4">
                            <template #header>
                                阻尼比(λ)
                                <br>
                                剪应变(γ)
                                <br>
                                (10-4×1.00)
                            </template>
                        </el-table-column>
                        <el-table-column header-align="center" align="center" width="100" prop="dampingRatio5">
                            <template #header>
                                阻尼比(λ)
                                <br>
                                剪应变(γ)
                                <br>
                                (10-4×5.00)
                            </template>
                        </el-table-column>
                        <el-table-column header-align="center" align="center" width="108" prop="dampingRatio6">
                            <template #header>
                                阻尼比(λ)
                                <br>
                                剪应变(γ)
                                <br>
                                (10-4×10.00)
                            </template>
                        </el-table-column>
                        <el-table-column header-align="center" align="center" width="108" prop="dampingRatio7">
                            <template #header>
                                阻尼比(λ)
                                <br>
                                剪应变(γ)
                                <br>
                                (10-4×50.00)
                            </template>
                        </el-table-column>
                        <el-table-column header-align="center" align="center" width="120" prop="dampingRatio8">
                            <template #header>
                                阻尼比(λ)
                                <br>
                                剪应变(γ)
                                <br>
                                (10-4×100.00)
                            </template>
                        </el-table-column>
                    </el-table>
                </div>

                <!-- 钻孔计算模型 -->
                <div class="el-form-ls">
                    <Title ref="keyTable" id="keyTable" name="钻孔计算模型" level="1" @toggleShow="toggleShow('keyTable')">
                    </Title>
                    <!-- 表格显示 -->
                    <el-table v-show="showKeyTable" class="listTable" ref="tableRef2" border :data="params3"
                        style="width: 100%" :cell-style="{ border: '1px solid #e5ebf7' }"
                        :header-cell-style="{ border: '1px solid #e5ebf7', borderLeft: 'none' }">
                        <el-table-column type="index" width="55" label="序号" />
                        <el-table-column header-align="center" align="center" label="岩性名称" prop="geotechnicalName" />
                        <el-table-column header-align="center" align="center" label="土类号" prop="stNumber" />
                        <el-table-column header-align="center" align="center" label="层底深度 (m)" prop="lbDepth" />
                        <el-table-column header-align="center" align="center" label="密度(kg/m3)" prop="geotechnicalDensity" />
                        <el-table-column header-align="center" align="center" label="层厚(m)" prop="layerThickness" />
                        <el-table-column header-align="center" align="center" label="剪切波波速V(m/s)" prop="swVelocity" />
                    </el-table>
                </div>

                <!-- 场地类别判别信息表 -->
                <div class="el-form-ls">
                    <Title ref="accessory" id="accessory" name="场地类别判别信息表" level="1" @toggleShow="toggleShow('accessory')">
                    </Title>
                    <!-- 表格显示 -->
                    <el-table v-show="showAccessory" class="listTable" ref="tableRef3" border :data="params4"
                        style="width: 100%" :cell-style="{ border: '1px solid #e5ebf7' }"
                        :header-cell-style="{ border: '1px solid #e5ebf7', borderLeft: 'none' }">
                        <el-table-column type="index" width="55" label="序号" />
                        <el-table-column header-align="center" align="center" label="钻孔编号" prop="boreholeNumber" />
                        <el-table-column header-align="center" align="center" label="20m等效剪切波速（M/s）" prop="eswv" />
                        <el-table-column header-align="center" align="center" label="覆盖层厚度m" prop="tocLayer" />
                        <el-table-column header-align="center" align="center" label="场地类别" prop="fieldType" />
                    </el-table>
                </div>
            </el-col>
            <el-col class="exportButton" ref="exportButton" :span="4" :lg="4" :xl="3">
                <el-button type="primary" @click="onExport">导出</el-button>
                <!-- 右侧列表 -->
                <ScrollBetter ref="scrollBetter" :treeData="treeData"></ScrollBetter>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { getCurrentInstance } from 'vue';
// 标题组件
import Title from '../components/Title.vue';
// 文件下载
import { downloadGet } from '@/utils/request';
// 引入接口
import {
    getById, //根据id查询
    exportDetails //导出详情
} from "@/api/drillingInfoCompreQuery/drillingInfoCompreQuery.js";
// 引入右侧目录组件
import ScrollBetter from '@/components/ScrollBetter';

// 当前实例
const { proxy } = getCurrentInstance();
// 全局路由对象
const router = useRouter();
// 当前路由对象
const route = useRoute();

// 是否编辑页
let isEdit = computed(() => (route.query.id ? false : true));

// 变量定义
const data = reactive({
    showBaseInfo: true, //是否显示项目基本情况表
    showKeyMap: true,
    showKeyTable: true,
    showAccessory: true,
    treeData: [],

    // 表单参数
    /**
     * 成孔信息
     *  dzqh_ap_crux_layer_pf
     */
    params1: {
        projectName: "", //钻孔依托的项目
        boreholeNumber: "", //钻孔编号
        hlLongitude: "", //经度
        hlLatitude: "", //纬度
        drillingDepth: "", //钻孔深度
        groundElevation: "", //地面高程（m）
        groundwaterLevel: "", //地下水位（m）
    },
    /**
     * 土动力参数表
     *  dzqh_ap__crux_sd
     */
    params2: [
        {
            serialNumber: "", //序号
            stNumber: "",//土类号
            geotechnicalName: "",//岩性名称
            boreholeNumber: "",//钻孔编号
            bdosSample: "",//土样埋深(米)
            parameterSource: "",//参数来源
            sdDensity: "",//密度(kg/m3)
            modulusRatio1: "",
            modulusRatio2: "",
            modulusRatio3: "",
            modulusRatio4: "",
            modulusRatio5: "",
            modulusRatio6: "",
            modulusRatio7: "",
            modulusRatio8: "",
            dampingRatio1: "",
            dampingRatio2: "",
            dampingRatio5: "",
            dampingRatio6: "",
            dampingRatio7: "",
            dampingRatio8: "",
        }
    ],
    /**
     * 钻孔计算模型表
     * dzqh_ap_crux_dh
     */
    params3: [
        // {
        //     geotechnicalName: "", //岩性名称
        //     stNumber: "",//土类号
        //     lbDepth: "",//层底深度 (m)
        //     geotechnicalDensity: "",//密度(kg/m^3)
        //     layerThickness: "",//层厚(m)
        //     swVelocity: "",//剪切波波速V(m/s)
        // }
    ],
    /**
     * 场地类别判别信息表
     * dzqh_ap_crux_sc
     */
    params4: [
        // {
        //     boreholeNumber: "",//钻孔编号（与土层模型相对应）
        //     eswv: "",//20m等效剪切波速（M/s）
        //     tocLayer: "",//覆盖层厚度m
        //     fieldType: "",//场地类别
        // }
    ]
});
const {
    showBaseInfo,
    showKeyMap,
    showKeyTable,
    showAccessory,
    treeData,
    params1,
    params2,
    params3,
    params4,
    rules
} = toRefs(data);

// 点击展开收起
function toggleShow(value) {
    switch (value) {
        case "baseInfo":
            showBaseInfo.value = !showBaseInfo.value;
            break;
        case "keyMap":
            showKeyMap.value = !showKeyMap.value;
            break;
        case "keyTable":
            showKeyTable.value = !showKeyTable.value;
            break;
        case "accessory":
            showAccessory.value = !showAccessory.value;
            break;
        default:
            break;
    }
}

// 根据id查询
const queryById = () => {
    proxy.$modal.loading('加载中！');
    getById({
        id: route.query.id,
        type: route.query.type
    }).then(res => {
        proxy.$modal.closeLoading();
        const { code, data } = res;
        if (code === 200 && data) {
            const { pfEntity, sdList, dhList, scEntity } = data;
            // 成孔信息
            params1.value = { ...pfEntity };
            // 土动力参数
            params2.value = [...sdList];
            // 钻孔计算模型
            params3.value = [...dhList];
            // 场地类别判别信息表
            params4.value = [{ ...scEntity }];
        }
    }).catch(err => {
        proxy.$modal.closeLoading();
        console.log(err.message);
    });
}
// 导出
const onExport = () => {
    const query = {
        id: route.query.id,
        type: route.query.type
    };
    downloadGet('/drillHoleQuery/exportDetails', query, '钻孔信息详情.xls')
}

// 获取右侧数据
const getScrollData = () => {
  treeData.value = []
  for (let key in proxy.$refs) {
    let cur = proxy.$refs[key]?.curTitleInfo
    if (cur) {
      if (!cur.own) {
        treeData.value.push(proxy.$refs[key].curTitleInfo)
      } else if (cur.own && cur.level === '2') {
        treeData.value.forEach(item => {
          item.children = item.children?.length > 0 ? item.children : []
          if (item.id == cur.own) {
            if (!item.children.includes(cur)) {
              item.children.push(cur)
              item.children.sort((a, b) => {
                return a.id.split('-')[1] - b.id.split('-')[1]
              })
            }
          }
        })
      } else if (cur.own && cur.level === '3') {
        treeData.value.forEach(item => {
          item.children = item.children?.length > 0 ? item.children : []
          item.children.forEach(itemnn => {
            itemnn.children = itemnn.children?.length > 0 ? itemnn.children : []
            if (itemnn.id == cur.own) {
              if (!itemnn.children.includes(cur)) {
                itemnn.children.push(cur)
                itemnn.children.sort((a, b) => {
                  return a.id.split('-')[1] - b.id.split('-')[1]
                })
              }
            }
          })
        })
      }
    }
  }
}

// 挂载完成
onMounted(() => {
    // 根据id查询
    queryById();
    // 获取右侧数据
    getScrollData();
});
</script>

<style lang="scss" scoped>
// 按钮组
.exportButton {
    .el-button {
        margin-left: 20px;
    }

    .scroll-better {
        margin-left: 10px;
    }
}
</style>